<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 1000px;height: 300px;margin: 0 auto;position: relative;overflow: hidden;}
        .imgbox{position: absolute;}
        .imgbox img{width: 1000px;height:300px;float: left}

        .btns input{position: absolute;width: 40px;height: 40px;border: none;background: rgba(200,200,200,0.5);top:130px;}
        .btns input:active{background: #55f;color: #fff}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
            <img src="./imgs/banner6.jpg" alt="">
            <img src="./imgs/banner7.jpg" alt="">
            <!-- 无缝轮播图1：复制图片1，放在所有图片最后，用来做无缝切换时的过渡使用 -->
            <img src="./imgs/banner1.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" id="left" value="左">
            <input type="button" id="right" value="右">
        </div>
    </div>
</body>
<script src="./move.js"></script>
<script>
    // OOA：轮播图，点击按钮切换图片
        // 1. 布局
            // 最大的容器box只有一张图的大小，溢出隐藏
                // 图片的容器imgbox，比最大的容器要大，要求能够让所有图片并排显示
                // 按钮定位到最大的容器box
        // 2. 选择元素，并设置默认索引
        // 3. 绑定点击事件
            // 4. 计算索引
                // 4.1 左按钮，--
                // 4.1 右按钮，++
            // 5. 改变图片的容器imgbox的位置

    // OOD：
        // function Banner(){
        //     // 1. 选择元素，并设置默认索引
        //     // ...
        //     // 2. 执行绑定点击事件
        //     this.addEvent();
        // }
        // Banner.prototype = {
        //     constructor:Banner,
        //     addEvent:function(){
        //         // 绑定左按钮点击事件
        //             // 4.1. 执行计算索引，--
        //             this.changeIndexLeft()
        //         // 绑定右按钮点击事件
        //             // 4.2. 执行计算索引，++
        //             this.changeIndexRight()
        //     },
        //     changeIndexLeft:function(){
        //         // 计算索引：--
        //         // ...
        //         // 5.1. 执行改变图片容器位置
        //         this.changePos();
        //     },
        //     changeIndexRight:function(){
        //         // 计算索引：++
        //         // ...
        //         // 5.2. 执行改变图片容器位置
        //         this.changePos();
        //     },
        //     changePos:function(){
        //         // 根据索引改变图片容器位置
        //         // ...
        //     }
        // }

    // OOP:
        function Banner(index){
            // 1. 选择元素
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            this.imgbox = document.querySelector(".imgbox");
            this.imgs = this.imgbox.children;
            // 并设置默认索引
            this.index = index;

            // 补全布局：
            // 根据实际的图片数量计算图片容器的尺寸
            this.imgbox.style.width = this.imgs.length * this.imgs[0].offsetWidth + "px";
            // 根据默认索引，设置图片容器的真实位置
            this.imgbox.style.left = this.index * -this.imgs[0].offsetWidth + "px";

            // 2. 执行绑定点击事件
            this.addEvent();
        }
        Banner.prototype = {
            constructor:Banner,
            addEvent:function(){
                const that = this;
                // 绑定左按钮点击事件
                this.left.onclick = function(){
                    // 4.1. 执行计算索引，--
                    that.changeIndexLeft()
                }
                // 绑定右按钮点击事件
                this.right.onclick = function(){
                    // 4.2. 执行计算索引，++
                    that.changeIndexRight()
                }
            },
            changeIndexLeft:function(){
                // 计算索引：--
                // ...
                // 5.1. 执行改变图片容器位置
                this.changePos();
            },
            changeIndexRight:function(){
                // 计算索引：++
                if(this.index === this.imgs.length-1){
                    // 无缝轮播图2：因为复制了第一张图放在了最后，那么最后一张图之后，要找到真正要显示的图片（第二张）
                    this.index = 1;
                    // 无缝轮播图3：
                    // 因为当前比目标小，导致没有实现无缝轮播，整个容器往回运动了
                    // 只要设置当前比目标大，就可以解决问题
                    // 将容器回归到初始位置，因为第一张图和真正的最后一张图长得一样，索引从视觉上没有区别，实现无缝轮播图
                    this.imgbox.style.left = 0;
                }else{
                    this.index++;
                }
                // 5.2. 执行改变图片容器位置
                this.changePos();
            },
            changePos:function(){
                // 根据索引改变图片容器位置
                // console.log(this.index);
                // 第一张0 * -1000：0
                // 第二张1 * -1000：-1000
                // 第三张2 * -1000：-2000
                // 第四张3 * -1000：-3000
                // this.imgbox.style.left = -this.index * this.imgs[0].offsetWidth + "px";
                // 使用运动函数，改变容器位置
                move(this.imgbox, {
                    left: -this.index * this.imgs[0].offsetWidth
                })
            }
        }

        new Banner(1);

</script>
</html>